<template>
  <div class="index">
    <div class="header-back" :style="{
        backgroundImage: `url(${backImg})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }">
      <div class="header-chunk">
        <p class="header-chunk-title">{{title}}</p>
        <div class="header-chunk-qrcode">
          <Image :src="titleQrcode"></Image>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-item" v-for="(item,idx) in contentList" :key="idx">
        <Image :src="item.img"></Image>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import './index.scss';
import { GetIndexContent } from '../utils/api.js' 
import currency from 'currency.js'
import { Image } from '@tarojs/components';
import Taro from '@tarojs/taro'
export default {
  name: 'Index',
  components: {
    Image
},
  setup(){
    const state = reactive({
      backImg: '',
      title: '',
      titleQrcode: '',
      contentList: [{},{},{},{},{}]
    });
    onMounted(() => {
      // console.log(navigator.clipboard,'___')
      // Taro.setClipboardData({
      //   data: '8.79 kPx:/ 复制打开抖音，看看【只有学习使我快乐的作品】# # 摄影 # 月光散落人间 # 愿所有的美好和... https://v.douyin.com/UdTSRYc/',
      //   success: (res) => {
      //     console.log(res, '____111')
      //   },
      //   complete:()=>{
      //     Taro.hideToast()
      //   }

      // })
      GetIndexContent({}).then((res) => {
        if(res.code == 200) {
          let { title, bgImg, QRCode, list } = res.data;
          state.backImg = bgImg;
          state.title = title;
          state.titleQrcode = QRCode;
          state.contentList = list;
        }
      })
    })

    const handleClick = (type, msg, cover = false) => {
      state.show = true;
      state.msg2 = msg;
      state.type = type;
      state.cover = cover;
    };

    return {
      ...toRefs(state),
      handleClick
    }
  }
}
</script>
